<template>
    <ckeditor style="min-height: 200px; max-height: 620px; border: 1px solid #ccc;"
              :editor="editor"
              @ready="onReady"
              @input="handleEditorDataChange"
              :value="editorData"
              :config="editorConfig"
    ></ckeditor>
</template>

<script>
    /**
     * CKEditor文档版
     * 文档参考：https://www.jianshu.com/p/9b4374e603f3
     * 1、import CkDecoupledEditor from '@/components/Editor/CkDecoupledEditor'
     * 2、components组件中加上CkDecoupledEditor
     * 3、指定位置放入：<ck-decoupled-editor v-model="content"></ck-decoupled-editor>
     */
    import CKEditor from '@ckeditor/ckeditor5-vue'
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
    import UploadAdapter from "./UploadAdapter";

    export default {
        name: "CkDecoupledEditor",
        props: {
            value: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: '请输入内容'
            }
        },
        computed: {
            contentData() {
                return this.content
            }
        },
        data() {
            return {
                editor: DecoupledEditor,
                editorData: '啊啊啊啊',
                editorConfig: {
                    // 可以控制编辑器的提示文本
                    placeholder: this.placeholder,
                    language: "zh-cn",
                    fontSize: {
                        options: [8, 10, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 32, 48]
                    },
                    fontFamily: {
                        options: ["宋体", "仿宋", "微软雅黑", "黑体", "仿宋_GB2312", "楷体", "隶书", "幼圆"]
                    }
                }

            }
        },
        methods: {
            onReady(editor) {
                // Insert the toolbar before the editable area.
                editor.ui.getEditableElement().parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.getEditableElement()
                );
                editor.plugins.get('FileRepository').createUploadAdapter = loader => {
                    //let val = editor.getData();
                    return {
                        upload: async () => {
                            return await loader.file.then(f => {
                                const F = new FileReader();
                                F.readAsArrayBuffer(f);
                                //console.log(f)
                                return new Promise(resolve => {
                                    F.onload = function () {
                                        resolve({bufAsArray: F.result, file: f})
                                    };
                                })
                            }).then(v => {
                                return UploadAdapter.upLoaderImg(v)//使用上传的方法。file.file
                                //返回标准格式
                                /*return {
                                    default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
                                }*/
                            });

                        }
                    }
                };
            },
            handleEditorDataChange(val){
                this.$emit('input', val)
            },
        },
        created() {
            // 编辑器组件创建时将外部传入的值直接赋予编辑器
            this.editorData = this.value
        },
        components: {
            // 编辑器组件的局部注册方式
            ckeditor: CKEditor.component
        }
    }
</script>

<style scoped>

</style>
